<template>
    <div class="ListDataMp3" v-if="dataList.length > 0">
        <div v-for="(item,index) in dataList" :key="index" class="item">
            <div class="text-name textVH">
                <p>{{item.name}}</p>
                <p>{{item.artist}}</p>
            </div>
            <div class="timi">{{item.songTimeMinutes}}</div>
            <div class="playMV" @click="$router.push('/video?rid=' + item.rid)" v-if="item.hasmv == 1"></div>
            <van-icon name="music-o" size="27" class="play" @click="addAudio(item)" color="#3ea"/>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
    name : 'ListDataMp3',
    props : ['dataList'],
    data() {
        return {

        }
    },
    methods : {
        ...mapMutations(['addAudio']),
    }
}
</script>

<style scoped>
    .ListDataMp3{
        height: 100%;
        width: 100%;
        background: #fff;
    }
    .item{
        position: relative;
        padding: 10px 15px;
        width: calc(100% - 30px);
    }
    .item>.text-name{
        width: calc(100% - 150px);
    }
    .item>div>p:nth-child(1){
        font-size: 13px;
        color: var(--songName);
    }
    .item>div>p:nth-child(2){
        font-size: 8px;
        color: var(--artist);
    }
    .playMV{
        position: absolute;
        top: 12px;
        right: 70px;
        height: 23px;
        width: 23px;
        background: url(../../assets/img/play_MV.png);
        background-size: 100% 100%;
    }
    .play{
        position: absolute;
        top: 10px;
        right: 20px;
    }
    .timi{
        position: absolute;
        top: 15px;
        right: 120px;
        font-size: 8px;
    }
</style>